<template>
  <div style="position: relative;overflow: hidden">
    <div class="elm-header">
      <div class="elm-header-user-box">
        <dl class="elm-header-user-list">
          <dt class="elm-header-user-img"><img  class="elm-header-user-img-self" :src="seller.avatar"></dt>
          <dd class="elm-header-user-text">
            <p><i class="user-text-band"></i><span class="user-text-title">{{seller.name}}</span></p>
            <p class="user-text-arrive">{{seller.description}} / {{seller.deliveryTime}}分钟送达</p>
            <p><i class="header-dec"></i><span class="user-text-desc">{{description }}</span></p>
          </dd>
        </dl>
        <div class="header-discount" @click="toggleShow(true)">
          <span class="header-discount-num">{{seller.supports.length}}个</span>
          <i class="icon-keyboard_arrow_right icon-discount-num "></i>
        </div>
      </div>
      <div class="elm-header-info-content"  @click="toggleShow(true)">
        <i class="bulletin"></i>
        <span class="info-list-text">{{seller.bulletin}}</span>
        <i class="icon-keyboard_arrow_right bulletin-icon"></i>
      </div>
    </div>
    <div class="header-bg-box">
      <img :src="seller.avatar" width="100%" height="100%">
    </div>
    <!--商家信息-->
    <transition name="fade">
      <header-info v-show="dialogueShow && seller.supports"
                   :seller="seller"
                   @closeToggleModel="toggleShow"
      ></header-info>
    </transition>
  </div>
</template>

<script>
  import HeaderInfo from '../../components/headerInfo/headerInfo'
  export default {
    // name: 'header'  // 会出现Do not use built-in or reserved HTML elements as component错误
    props: ['seller'],
    data () {
      return {
        dialogueShow: false
      }
    },
    components: {
      HeaderInfo
    },
    methods: {
      toggleShow (flag) {
        this.dialogueShow = flag
      }
    },
    computed: {
      description () {
        return this.seller.supports[0].description
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .elm-header
    background-color:rgba(7,17,27,.5)
  .header-bg-box
    position: absolute
    width: 100%
    height:100%
    top:0
    left:0
    z-index: -1
    filter:blur(10px)
  .elm-header-info-content
    position:relative
    width: 100%
    padding:0 25px 0 38px
    height:28px
    color:#ffffff
    font-size:12px
    line-height:28px
    background-color:rgba(7,17,27,.2)
    box-sizing:border-box
  .bulletin
    position:absolute
    left:12px
    top: 8px
    display:inline-block
    width:22px
    height:12px
    bg-image('bulletin')
    background:url("../../../resource/img/bulletin@2x.png") no-repeat
    background-size:100% 100%
    vertical-align:middle
    margin-right: 4px
  .bulletin-icon
    position:absolute
    right:12px
    top:10px
  .info-list-text
    display: inline-block
    width:100%
    text-align: center
    line-height: 28px
    white-space: nowrap
    text-overflow: ellipsis
    overflow:hidden
  .elm-header-user-box
    position:relative
  .elm-header-user-list
    padding:24px 12px 18px 24px
    overflow:hidden
  .elm-header-user-img
    float:left
    width:64px
    height:64px
    margin-right:18px
    background-color red
  .elm-header-user-img-self
    width: 100%
    height:100%
  .elm-header-user-text
    float:left
  .header-dec
    display:inline-block
    width:12px
    height:12px
    background:url("../../../resource/img/decrease_1@2x.png") no-repeat
    bg_image('decrease_1')
    background-size:100% 100%
    vertical-align:middle
    margin-right: 4px
  .user-text-band
    display:inline-block
    width:30px
    height:18px
    bg-image('brand')
    background:url("../../../resource/img/brand@2x.png") no-repeat
    background-size:100% 100%
    vertical-align:middle
    margin-right: 6px
  .user-text-title
    font-size:16px
    color:rgb(255,255,255)
    font-weight:bold
    line-height:18px
    vertical-align:middle
  .user-text-arrive
    font-size:12px
    color: #ffffff
    line-height:12px
    padding:6px 0 8px 0

  .user-text-desc
    font-size:12px
    color: #ffffff
  .fade-enter-active, .fade-leave-active
    transition: opacity .5s
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    opacity: 0
  .header-discount
    position:absolute
    right:12px
    bottom:14px;
    padding:0 8px
    line-height:24px
    border-radius: 14px
    background:rgba(0,0,0,.2)
    text-align:center
    cursor:pointer

  .header-discount-num
    display:inline-block
    font-size: 12px
    color:rgb(255,255,255)

  .icon-discount-num
    display:inline-block
    font-size: 12px
    color:rgb(255,255,255)
    vertical-align middle
</style>
